<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <style>
            td, th {
                border: 1px solid #aaa;
                width: 100px;
                height: 30px;
            }

            .align-center {
                text-align: center;
            }

            .align-right {
                text-align: right;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>得分</th>
                    <th>学科</th>
                </tr>
            </thead>
            <tbody id='tb'>

            </tbody>
        </table>
    </body>

    <script>
        var tableData = [
            { code: '001', name: '小明', score: 90, subject: '数学' },
            { code: '002', name: '小强', score: 100, subject: '数学' },
            { code: '003', name: '小华', score: 80, subject: '数学' },
            { code: '004', name: '小东', score: 60, subject: '数学' },
            { code: '005', name: '小陈', score: 99, subject: '数学' }
            
        ]

        // 1. 获取tbody dom 元素节点
        var tb = document.querySelector('#tb');

        for (var i = 0;  i < tableData.length; i++) {
            var item = tableData[i];

            var strArr = [
                '<tr>',
                '<td class="align-center">' + item.code + '</td>',
                '<td class="align-center">' + item.name + '</td>',
                '<td class="align-right">' + item.score + '</td>',
                '<td class="align-center">' + item.subject + '</td>',
                '</tr>'
            ]

            tb.innerHTML += strArr.join('');
          
        }
    </script>
</html>